import 'package:flutter/material.dart';
/*
组件自身管理一些内部状态，同时父组件管理一些其他外部状态
，手指按下时，盒子的周围会出现一个深绿色的边框，抬起时，边框消失。
点击完成后，盒子的颜色改变。 TapboxC将其_active状态导出到其父组件中，
但在内部管理其_highlight状态。这个例子有两个状态对象_ParentWidgetState和_TapboxCState。

_ParentWidgetStateC类：
1.管理_active状态
2.实现_handleTapboxChanged()，当盒子被点击时调用
3.当点击盒子并且_active状态改变时调用setState()更新ui

_TapboxCState对象：
1.管理_highlight状态
2.GestureDetector监听所有tap事件，当用户点下时，它添加高亮（深绿色边框），当用户释放时，会移除高亮
3.当按下 抬起 或者取消点击时更新_highlight状态，调用setState()更新ui
4.当点击时，将状态的改变传递给父组件
 */
class Exam_3 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("混合状态管理"),
      ),
      body: ParentWidgetC(),
    );
  }
  
}

class ParentWidgetC extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _ParentWidgetCState();
  }

}

class _ParentWidgetCState extends State<ParentWidgetC>{
  bool _active = false;

  void _handleTapboxChanged(bool newValue){
    setState(() {
      _active = newValue;
    });
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      child: new TapboxC(
        active:_active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }

}

class TapboxC extends StatefulWidget{

  final bool active;
  final ValueChanged<bool> onChanged;

  const TapboxC({Key key, this.active, this.onChanged}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _TapboxCState();
  }

}

class _TapboxCState  extends State<TapboxC>{

  bool _highlight = false;

  void _handleTapDown(TapDownDetails details){
    setState(() {
      _highlight = true;
    });
  }

  void _handleTapUp(TapUpDetails details){
    setState(() {
      _highlight = false;
    });
  }

  void _handleTapCancel(){
    setState(() {
      _highlight = false;
    });
  }

  void _handleTap(){
    widget.onChanged(!widget.active);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new GestureDetector(
      onTapDown: _handleTapDown,//处理按下事件
      onTapUp: _handleTapUp,//处理抬起事件
      onTap: _handleTap,
      onTapCancel: _handleTapCancel,
      child: new Container(
        child: new Center(
          child: new Text(widget.active ? 'Active':'Inactive',
                          style: new TextStyle(fontSize: 32.0,color: Colors.white),),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(
          color: widget.active ? Colors.lightGreen[700]:Colors.grey[600],
          border: _highlight
            ? new Border.all(
            color: Colors.teal[700],
            width: 10.0
          ):null,
        ),
      ),
    );
  }
}